<template>
	<view>
		<uni-search-bar class="u-search" @confirm="search" @clear="clear" placeholder="请输入关键词搜索" :radius="100"
			cancel-button="none" />
		<view v-if="blogs.length==0" class="none">
			<image src="../../static/icons/nodata.png" mode="widthFix" class="logo"></image>
			<br>
			<text>{{txt_no_data}}</text>
		</view>
		<view v-else>
			<view class="data" v-for="(item,index) in blogs" :key="item.id" @click.stop="goBlog(item.id)">
				<text class="item-title">{{item.title}}</text>
				<text class="item-desc">{{item.description}}</text>
				<image class="item-focus" :src="item.picture" mode="widthFix"></image>
				<view>
					<text v-for="(tag,idx) in item.tags" class="item-tag" :key="idx">{{tag}}</text>
				</view>
				<view class="icons-container">
					<!-- <image src="../../static/icons/ic_good_fill.png" class="icon"></image> -->
					<text @click.stop="changeGood(item.id)"
						:class="good_ids.indexOf(item.id)>=0?'iconfont icon-pyro1 icon_good':'iconfont icon-pyro1 icon'"></text>
					<!-- <text v-if="good_ids.indexOf(item.id)>=0" class="iconfont icon-pyro1 icon" style="color:red;"></text>
					<text v-else class="iconfont icon-pyro1 icon"></text> -->
					<text class="icon-text">{{item.good}}</text>
					<!-- <image src="../../static/icons/ic_comment.png" class="icon"></image> -->
					<text class="iconfont icon-genshin_game_map_liyue icon" style="color:gray;"></text>
					<text class="icon-text">{{item.comments.length}}</text>
					<!-- <image src="../../static/icons/ic_count.png" class="icon"></image> -->
					<text class="iconfont icon-genshin_game_map_xumi icon" style="color:goldenrod;"></text>
					<text class="icon-text">{{item.readCount}}</text>
				</view>
				<image @click.stop="clickshowBlogger(item.user)" class="img-avatar" :src="item.user.avatar"
					mode="aspectFill"></image>
				<!-- <image class="label" src="../../static/icons/ic_tag_fill.png" mode="aspectFill"></image> -->
				<text class="iconfont icon-genshin_game_sign_genshin label" @click.stop="drop(item.id)"
					style="color:#747868;"></text>
			</view>
			<view v-if="blogs.length==count" class="bottom">
				---我也是有底线的---
			</view>
			<view v-else class="bottom">
				加载中···
			</view>
			<diablog-shell title="博主概况" :confirmText="'确认'" ref="shell" @confirm="">
				<text style="padding: 20rpx;">{{blogger}}</text>

			</diablog-shell>
		</view>

	</view>
</template>

<script>
	let page = 0
	let size = 3
	let searching = false
	let key_blogs = "!@#$%"
	export default {
		data() {
			return {
				blogs: [],
				count: -1,
				txt_no_data: "抱歉，没有相关文章",
				good_ids: [],
				blogger: "",

			}
		},
		onLoad() {
			this.$noti.register(this.$par.notice_refresh_count, this.noticeRefreshCount, this)
			let ids = uni.getStorageSync(this.$par.key_good_ids)
			if (ids) {
				this.good_ids = ids
			}
			// console.log(uni.getStorageInfoSync())
			let blogs = uni.getStorageSync(key_blogs)
			if (blogs) {
				this.blogs = blogs
				this.count = blogs.length
			} else {
				this.getPagedBlogs()
			}
		},
		onUnload() {
			this.$noti.remove(this.$par.notice_refresh_count, this)
		},
		onPullDownRefresh() {
			page = 0
			this.count = -1
			this.blogs = []
			this.getPagedBlogs()
		},
		onReachBottom() {
			if (searching || this.blogs.length == this.count) {
				return
			}
			page++
			this.getPagedBlogs()

		},
		methods: {
			getPagedBlogs() {
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": page,
					"size": size
				}
				this.$req.getWithHeader(this.$par.host + this.$par.action_blogs_page, header, res => {
					res.data.data.forEach(blog => {
							blog.picture = this.$par.host + blog.picture
							blog.user.avatar = this.$par.host + blog.user.avatar
						}),
						this.count = parseInt(res.data.message)
					//this.blogs.push(res.data.data)
					this.blogs = [...this.blogs, ...res.data.data] //拓展运算符
					this.blogs.sort((blog1, blog2) => {
						let m1 = new Date(blog1.createTime).getTime()
						let m2 = new Date(blog2.createTime).getTime()
						return m1 - m2
					})
					uni.setStorageSync(key_blogs, this.blogs)
				}, () => {
					uni.stopPullDownRefresh();
				})
			},
			search(e) {
				let kw = e.value
				if (kw.length == 0) {
					this.blogs = []
					this.getPagedBlogs()
				}
				searching = true
				this.blogs = []
				this.count = -1
				page = 0
				uni.showLoading({
					title: '正在快马加鞭搜索中···',
					mask: false
				});
				this.$req.get(this.$par.host + this.$par.action_search + kw, res => {
					//console.log(res)
					res.data.data.forEach(blog => {
						blog.picture = this.$par.host + blog.picture
						blog.user.avatar = this.$par.host + blog.user.avatar
						this.blogs = [...this.blogs, blog]
					})
				}, () => {
					uni.hideLoading()
				})

			},
			clear() {
				searching = false
				this.blogs = []
				this.getPagedBlogs()
			},
			changeGood(id) {
				let good = true
				if (this.good_ids.indexOf(id) >= 0) {
					good = false
				}
				if (good) {
					this.good_ids = [...this.good_ids, id]
				} else {
					//splice删除指定位置元素
					//shift删除第一个
					//pop删除最后一个
					let pos = this.good_ids.indexOf()
					this.good_ids.splice(pos, 1)
					// this.good_ids.shift()
					// this.good_ids.pop()
				}
				uni.setStorageSync(this.$par.key_good_ids, this.good_ids)
				this.postGood(id, good)
			},
			//发送数据到服务器，修改点赞数量+1或-1，服务器服务器返回最新的点赞数量
			postGood(id, good) {
				uni.showLoading({
					title: '点赞成功',
					mask: false
				});
				let url = this.$par.host
				let action = good ? this.$par.action_good : this.$par.action_del_good
				url += action
				let data = {
					"id": id
				}
				this.$req.postQuery(url, data, res => {
					// console.log(res)
					this.blogs.forEach(blog => {
						if (blog.id == id) {
							blog.good = res.data.data
						}
					})
				}, () => {
					uni.hideLoading()
				})
			},
			drop(id) {
				uni.showActionSheet({
					itemList: ["屏蔽该条博客", "举报该条博客"],
					success: res => {
						// console.log(res)
						if (res.tapIndex == 0) {
							//使用缓存保存要屏蔽的blod的id，然后在getPagedBlogs中读取缓存，匹配中的则不添加到this.blog
							uni.showModal({
								title: '确认',
								content: '确认屏蔽该条博客吗？',
								showCancel: true,
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.showToast({
											title: '已屏蔽，以后会给您减少相关内容的推荐',
											duration: 3000
										});
									} else if (res.cancel) {
										uni.showToast({
											title: '已取消屏蔽',
											duration: 3000
										});
									}
								},
								fail: function(res) {
									console.log(res.errMsg)
								},
								complete: () => {}
							});
						} else if (res.tapIndex == 1) {
							uni.showModal({
								title: '确认',
								content: '确认举报该条博客吗？',
								showCancel: true,
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.showToast({
											title: '已举报，感谢您为网站净化做出的贡献',
											duration: 3000
										});
									} else if (res.cancel) {
										uni.showToast({
											title: '已取消举报',
											duration: 3000
										});
									}
								},
								fail: function(res) {
									console.log(res.errMsg)
								},
								complete: () => {}
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goBlog(id) {
				uni.navigateTo({
					url: '../../pages/detail/detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			refreshReadCount(id, count) {
				this.blogs.forEach(blog => {
					if (id == blog.id) {
						blog.readCount = count
					}
				})
			},
			noticeRefreshCount(info) {
				let id = info.id
				let count = info.count
				this.refreshReadCount(id, count)
			},
			clickshowBlogger(user) {
				this.blogger = "作者:" + user.nickName + "\n联系方式:" + user.email
				this.$refs.shell.show()
			}



		}
	}
</script>

<style>
	@import url("index.css");
</style>